// JavaScript Document

var animations = new Array(); // Colonnes : (0)id | LtoR | (2)TtoB | x | (4)y | xspeed | (6)yspeed | hAmpl | (8)vAmpl | img | opacity
var count = 0;

animateCanvas = function(canvasId, imagePath) {
	var canvas = document.getElementById(canvasId);
  if ($(canvas).length == 0) return;
	animations[count] = new Array(canvasId, 0, 1, 0, 0, 0, 0, 0, 0, new Image(), 0);
	var ctx = canvas.getContext('2d');
	var rw = $(canvas).parent().outerWidth() - $(canvas).parent().css('padding-left').replace('px','') - $(canvas).parent().css('padding-right').replace('px','');
	$(canvas).attr('width' , rw);
	$(canvas).attr('height' , $(canvas).css('height').replace('px',''));
	
	var tmpCount = count;
	var cimg = animations[tmpCount][9];
	cimg.onload = function() {
		animations[tmpCount][1] = 1;
		animations[tmpCount][7] = cimg.width  - $(canvas).attr('width');
		animations[tmpCount][8] = cimg.height - $(canvas).attr('height');
		animations[tmpCount][5] = animations[tmpCount][7] > animations[tmpCount][8] ? speed : speed * animations[tmpCount][7] / (0.9 * animations[tmpCount][8]);
		animations[tmpCount][6] = animations[tmpCount][8] > animations[tmpCount][7] ? speed : speed * animations[tmpCount][8] / (0.9 * animations[tmpCount][7]);
	};
	cimg.src = imagePath;
	count++;
}

doProgress = function(element) {
  $(element).removeClass("red");
  $(element).removeClass("green");
  $(element).addClass("blue");
  $(element).addClass("progress");
  $(element).css('background-position', '-' + maxProgressWidth + 'px 0');
  progressInput(element, 50);
}

successProgress = function(element) {
  $(element).stop(true);
  setTimeout(function() {
    $(element).removeClass("blue");
    $(element).addClass("green");
  }, 500);
  $(element).animate({ backgroundPosition:"0 0" }, 1000);
}

failProgress = function(element) {
  $(element).stop(true);
  setTimeout(function() {
    $(element).removeClass("blue");
    $(element).addClass("red");
  }, 500);
  $(element).animate({ backgroundPosition:"0 0" }, 1000);
}

progressInput = function(element, percentage) {
  if (percentage >= 99) {
    return;
  }
  var npos = -maxProgressWidth + $(element).outerWidth() * percentage / 100;
  $(element).animate({ backgroundPosition:npos + "px 0" }, 500, 'linear', function() {
    progressInput(element, percentage + (100 - percentage) / 2);
  });
}

resizeCanvas = function() {
	for (i = 0; i < count; i++) {
    var canvas = document.getElementById(animations[i][0]);
    var ctx = canvas.getContext('2d');
    var rw = $(canvas).parent().outerWidth() - $(canvas).parent().css('padding-left').replace('px','') - $(canvas).parent().css('padding-right').replace('px','');
    $(canvas).attr('width' , rw);
    var cimg = animations[i][9];
	  if (animations[i][1] != 0){
      animations[i][1] = 1;
      animations[i][2] = 1;
      animations[i][3] = 0;
      animations[i][4] = 0;
      animations[i][7] = cimg.width  - $(canvas).attr('width');
      animations[i][8] = cimg.height - $(canvas).attr('height');
      animations[i][5] = animations[i][7] > animations[i][8] ? speed : speed * animations[i][7] / (0.9 * animations[i][8]);
      animations[i][6] = animations[i][8] > animations[i][7] ? speed : speed * animations[i][8] / (0.9 * animations[i][7]);
    }
  }
}

draw = function() {
	for (i = 0; i < count; i++) {
	  if (animations[i][1] != 0){
			if (animations[i][3] >= 0 || animations[i][3] <= -animations[i][7]) {
				animations[i][1] *= -1;
			}
			if (animations[i][4] >= 0 || animations[i][4] <= -animations[i][8]) {
				animations[i][2] *= -1;
			}
			var dx = animations[i][7] <= 0 ? 0 : animations[i][1] * animations[i][5];
			var dy = animations[i][8] <= 0 ? 0 : animations[i][2] * animations[i][6];
			animations[i][3] += dx;
			animations[i][4] += dy;
			var canvas = document.getElementById(animations[i][0]);
			var ctx = canvas.getContext('2d');
			
			ctx.translate(dx, dy);
			ctx.drawImage(animations[i][9], 0, 0, animations[i][9].width, animations[i][9].height);
			
			var h = $(canvas).height() * 0.7;
			var w = $(canvas).width();
			ctx.fillStyle = 'rgba(90, 90, 90, 0.4)';
			ctx.fillRect(-animations[i][3], -animations[i][4], w, h);
			h++;
			
			ctx.strokeStyle = '#888';
			ctx.lineWidth = 1;
			ctx.beginPath();
			ctx.moveTo(-animations[i][3]    , -animations[i][4] + h);
			ctx.lineTo(-animations[i][3] + w, -animations[i][4] + h);
			ctx.stroke();
			h++;
			
			ctx.fillStyle = 'rgba(30, 30, 30, 0.8)';
			ctx.fillRect(-animations[i][3], -animations[i][4] + h , w, $(canvas).height() - h);
			
			if (animations[i][10] < 1) {
				$(canvas).css('opacity', animations[i][10]);
				animations[i][10] += 1 / FPS;
			}
		}
	}
}
setInterval(draw, 1000 / FPS);
